<template>
	<view>
		<!-- 它会覆盖在图片的上面，当图片加载完成之后，它消失 -->
		<view 
		class="mask"
		:style="{width: width + 'rpx', height: height + 'rpx'}"
		v-show="isShow"></view>
		<image :src="src" lazy-load :style="{width: width + 'rpx', height: height + 'rpx'}" @load="hLoad"></image>
	</view>
</template>

<script>
	export default {
		name:"ugo-image",
		props: {
			src: {
				type: String
			},
			width: { type: Number, default: 120 },
			height: { type: Number, default: 120 },
		},
		data() {
			return {
				isShow: true
			};
		},
		methods:{
			hLoad(){
				console.log(this.src,'加载完成')
				this.isShow = false
			}
		}
	}
</script>

<style>
.mask {
	background-color: rgba(0, 0, 0, 0.5);
	position: relative;
	overflow: hidden;
	display: block;
}
.mask::before {
	content: '';
	position: absolute;
	animation: shan 1.5s ease 0s infinite;
	top: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(
	  to left,
	  rgba(255, 255, 255, 0) 0,
	  rgba(255, 255, 255, 0.3) 50%,
	  rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-45deg);
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>